import { useState, useEffect } from 'react';
import { Tag } from 'antd';
import { getMessage, TextWidget } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';
import { toJS } from '@formily/reactive';
import IconPickerModal from '@inbiz/basic/IconPicker';

interface IconType {
  type: string;
  color?: string;
  size?: string | number;
  [key: string]: any;
}

type IProps = {
  visible: boolean;
  value?: IconType
  defaultValue?: IconType;
  onChange?: (val: IconType) => void;
  onCancel: () => void;
  onOk?: (val: IconType) => void;
  // 控制颜色选择的显隐状态
  showColorPicker?: boolean;
  // 控制图标大小的显隐状态
  showIconSize?: boolean;
  // 需要的格式（目前只有分组和单个图标格式）
  needType?: 'group';
};

const IconPicker = (props: IProps) => {
  const { value, defaultValue, onChange, showColorPicker, showIconSize, needType } = props;
  const [iconItem, setIconItem] = useState(defaultValue || {});
  const [visible, $visible] = useState(false)

  useEffect(() => {
    value && setIconItem(toJS(value || {}) as typeof iconItem);
  }, [value]);

  // 关闭属性栏的图标样式
  const closeTag = () => {
    onChange?.({
      type: '',
    });
  };

  return (
    <div className="setterIcon">
      <div className="setterIcon-Box">
        <div className="setterIcon-icon">
          {needType === 'group' ? (
            <Tag
              style={{ display: 'flex', alignItems: 'center', padding: 4 }}
              closable
              onClose={closeTag}
            >
              <div>
                {value?.group?.Id?.length > 0 ? value?.group.Name : getMessage('ProcessManage.pleaseSelectGroup')}
              </div>
            </Tag>
          ) : (
            value?.type && (
              <Tag
                closable
                onClose={closeTag}
                style={{ display: 'flex', alignItems: 'center', padding: 4 }}
              >
                {value?.type?.indexOf('/') === -1 ? (
                  <InbizIcon
                    type={value?.type}
                    style={{
                      color: value?.color,
                      fontSize: 13,
                    }}
                  />
                ) : (
                  <InbizIcon type={value?.type} style={{ width: 21, height: 21, color: value?.color }} />
                )}
              </Tag>
            )
          )}
        </div>

        <div className="setterIcon-Select">
          <a onClick={() => $visible(true)} style={{ color: 'var(--inbiz-color-primary)' }}>
            <TextWidget>ProcessManage.select</TextWidget>
          </a>
        </div>
      </div>

      {
        // @ts-ignore
        visible && <IconPickerModal
          {...props}
          visible={visible}
          value={iconItem}
          onCancel={() => $visible(false)}
          onChange={(value) => {
            setIconItem(value);
            onChange?.(value);
            $visible(false)
          }}
          isHideSearch={true}
          isHideTitle={true}
          showIconGroup={['tabProcessIcon']}
          showColorPicker={showColorPicker === false ? false : true}
          showIconSize={showIconSize === false ? false : true}
        />
      }
    </div>
  );
};

export default IconPicker;
